<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

<c:url value="/actor" var="actorURL"/>

<div style="margin-top: 3%">

	<div style="width: 63%;float: left;">
		<table id="jqGrid"></table>
		<div id="jqGridPager"></div>
	</div>
	<div style="width: 35%;float: left;" id="divGrupos"></div>
	
</div>

<script>
var lastId = null;

function mostrarGrupos(rowid){
	$("#divGrupos").html("");
	$("#divGrupos").append("<table id='jqGridGrupos_" + rowid + "'></table>");
	$("#jqGridGrupos_" + rowid).jqGrid({
        url: "${actorURL}/getGroups/" + rowid,
        mtype: "GET",
        datatype: "json",
        colModel: [
            { label: 'Id', name: 'id', key: true, width: 125},
            { label: 'Name', name: 'name', width: 100}
        ],
        width: $(window).width() * 0.35,
        height: "auto",
        caption: "Grupos de " + $("#jqGrid").getCell(rowid, "name"),
        hidegrid: false,
        cmTemplate:{sortable:false},
        emptyrecords: "No posee grupos"
    });					
}

$(document).ready(function()
{
	var editOptions = {closeAfterEdit: true, mtype: "POST", ajaxEditOptions:{contentType: "application/json;"}, url:"${actorURL}/save", serializeEditData:function (data){data.objectType = "AGENT";delete data.oper;return JSON.stringify(data);}};
	var createOptions = {closeAfterEdit: true, mtype: "PUT", ajaxEditOptions:{contentType: "application/json;"}, url:"${actorURL}/create", serializeEditData:function (data){data.objectType = "AGENT";data.id = generateUUID();delete data.oper;return JSON.stringify(data);}};
	var deleteOptions = {mtype: "DELETE", url:"${actorURL}/delete", onclickSubmit: function(params, postdata){params.url = params.url + "/" + postdata;}};
	
	$("#jqGrid").jqGrid({
        url: "${actorURL}/getAgents",
        mtype: "GET",
        datatype: "json",
        colModel: [
            { label: 'Id', name: 'id', key: true, width:125, editable: false},
            { label: 'Name', name: 'name', width: 160, editable: true, editrules:{required: true}},
            { label: 'Mbox', name: 'mbox', width: 135, editable: true, editrules:{required: true}}
        ],
		viewrecords: true,
        width: $(window).width() * 0.60,
        height: $(window).height() * 0.6,
        caption: "Agentes",
        hidegrid: false,
        cmTemplate:{sortable:false},
        pager: "#jqGridPager",
        gridComplete: initGrid,
        onSelectRow: function(rowid, selected) {
        	mostrarGrupos(rowid);
		},
		loadComplete: function(){
			if($(this).getGridParam("reccount") > 0)
				mostrarGrupos($(this).getDataIDs()[0]);	
		}
    });
	
	$("#jqGrid").navGrid("#jqGridPager",{edit: true, add: true, del: true, search: false, refresh: false, view: false, position: "left"}, editOptions, createOptions, deleteOptions);
});

function initGrid()
{
	$(this).contextmenu({menu: [{title: "Agregar a grupo", cmd: "add"}],
			select: function(event, ui){
				seleccionarGrupo();
			},
			beforeOpen: function(event, ui){
				$("#jqGrid").setSelection($(event.target).parent("tr").attr("id"));
                return true;
			}
	});
}

function agregarAGrupo(idAgente, idGrupo)
{
	$.ajax({type: "PUT", url: "${actorURL}/addToGroup/" + idGrupo + "/" + idAgente, success: function(){$("#jqGridGrupos").trigger("reloadGrid");}});
}

function seleccionarGrupo()
{
	$.get("${actorURL}/getGroups",{},function(data){
		var div = $("<div style='width:100%'></div>");
		var select = $("<select style='width:100%'></select>");
		for(i = 0; i < data.length; i++)
			$(select).append("<option value='" + data[i].id + "'>" + data[i].name + "</option>");
		$(div).append("<p>Seleccione el grupo al que desea agregar el agente.</p>");
		$(div).append($(select));
		$(div ).dialog({
		      title: "Agregar a grupo",
			  resizable: false,
		      height:300,
		      modal: true,
		      buttons: {
		        Agregar: function() {
		          agregarAGrupo($("#jqGrid").getGridParam("selrow"), $(select).val());
		          $( this ).dialog("close");
		        },
		        Cancelar: function() {
		          $(this).dialog("close");
		        }
		      }
		    });
	},"json");
}
</script>

